<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息列表</title>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>

<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题.
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:3306):需要加上项目名
  -->

<!-- 引入jquery -->
<script src="${APP_PATH}/static/js/jquery-1.9.1.min.js"></script>
<!-- 引入样式 -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!--搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h2>员工信息管理</h2>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-10">
				<button class="btn btn-success">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
				</button>
				<button class="btn btn-danger">
					<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
				</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>empId</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>					
						<th>deptName</th>					
						<th>操作</th>					
					</tr>
					<c:forEach items="${pageInfo.list}" var="emp">
						<tr>
							<th>${emp.empId}</th>
							<th>${emp.empName}</th>
							<th>${emp.gender=="M"?"男":"女"}</th>
							<th>${emp.email}</th>					
							<th>${emp.department.deptName}</th>					
							<th>
								<button class="btn btn-info btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>更改
								</button>
								<button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button>
							</th>					
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6 col-md-offset-4">
				当前第 ${pageInfo.pageNum} 页 , 总共 ${pageInfo.pages} 页 , 总共 ${pageInfo.total} 条记录
			</div>			
		</div>
		<div class="row">
			<!--分页条信息  -->
			<div class="col-md-6 col-md-offset-3">
				<nav aria-label="Page navigation">
				  <ul class="pagination">
				  <c:if test="${!pageInfo.isFirstPage}">
				  	<li><a href="${APP_PATH}/empList?pn=1">首页</a></li>
				  </c:if>
				  
				  <c:if test="${pageInfo.hasPreviousPage }">
				  	<li>
				      <a href="${APP_PATH}/empList?pn=${pageInfo.pageNum-1}" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				  </c:if>
				    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
				    	<c:if test="${page_Num == pageInfo.pageNum }">
				    		<li class="active"><span>${page_Num}</span></li>
				    	</c:if>
				    	<c:if test="${page_Num != pageInfo.pageNum }">
				    		<li><a href="${APP_PATH}/empList?pn=${page_Num}">${page_Num}</a></li>
				    	</c:if>
				    </c:forEach>
				  <c:if test="${pageInfo.hasNextPage }">
				  	<li>
				      <a href="${APP_PATH}/empList?pn=${pageInfo.pageNum+1}" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				  </c:if>
				  
				  <c:if test="${!pageInfo.isLastPage}">
				  	<li><a href="${APP_PATH}/empList?pn=${pageInfo.pages}">尾页</a></li>
				  </c:if>	    
				   
				  </ul>
				</nav>
			</div>
		</div>	
	</div>

</body>
</html>